<template>
	<view class="interactive-page">
		<!-- 对话列表界面 -->
		<view v-if="currentView === 'conversationList'" class="conversation-list-page">
			<view class="page-header">
				<text class="page-title">与专家对话</text>
				<text class="page-subtitle">查看与资深护理组专家的对话记录</text>
			</view>
			
			<view v-if="conversationList.length > 0" class="conversation-list">
				<view class="conversation-item" v-for="(conversation, index) in conversationList" :key="index" 
					@click="openChat(conversation.expert)">
					<view class="conversation-avatar">
						<text class="avatar-text">{{ conversation.expert.name }}</text>
					</view>
					<view class="conversation-info">
						<view class="conversation-header">
							<text class="conversation-name">{{ conversation.expert.name }}</text>
							<text class="conversation-time">{{ formatConversationTime(conversation.lastMessageTime) }}</text>
						</view>
						<text class="conversation-title">{{ conversation.expert.title }}</text>
						<text class="conversation-preview">{{ conversation.lastMessage }}</text>
					</view>
				</view>
			</view>
			
			<view v-else class="empty-state">
				<text class="empty-text">暂无对话记录</text>
				<button class="select-expert-btn" @click="showExpertSelection">选择专家开始对话</button>
			</view>
		</view>
		
		<!-- 高年资护士选择界面 -->
		<view v-else-if="currentView === 'expertSelection'" class="selection-page">
			<view class="page-header">
				<text class="page-title">选择高年资护士</text>
				<text class="page-subtitle">选择高年资护士为您提供心理疏导支持</text>
			</view>
			
			<view class="nurse-list">
				<view class="nurse-item" v-for="(nurse, index) in nurseList" :key="index">
					<view class="nurse-info" @click="selectNurse(nurse)">
						<view class="nurse-avatar">
							<text class="avatar-text">{{ nurse.name }}</text>
						</view>
						<view class="nurse-details">
							<view class="nurse-header">
								<text class="nurse-name">{{ nurse.name }}</text>
							</view>
							<text class="nurse-title">{{ nurse.title }}</text>
							<text class="nurse-department">{{ nurse.department }}</text>
						</view>
					</view>
					<view class="nurse-actions">
						<button class="view-intro-btn" @click.stop="viewNurseIntro(nurse)">查看简介</button>
						<button class="select-btn" @click.stop="selectNurse(nurse)">选择</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 对话框界面 -->
		<view v-else-if="currentView === 'chatDetail'" class="chat-page">
			<!-- 聊天头部 -->
			<view class="chat-header">
				<view class="chat-header-left">
					<uni-icons type="left" size="20" color="#333333" @click="backToConversationList"></uni-icons>
					<view class="chat-header-info">
						<text class="chat-nurse-name">{{ selectedNurse.name }}</text>
						<text class="chat-nurse-title">{{ selectedNurse.title }}</text>
					</view>
				</view>
				<view class="chat-header-actions">
					<uni-icons type="settings" size="20" color="#666666" @click="showSettings"></uni-icons>
				</view>
			</view>
			
			<!-- 聊天消息列表 -->
			<scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" scroll-with-animation>
				<view class="message-item" v-for="(message, index) in messageList" :key="index" 
					:class="{ 'message-right': message.isSelf }">
					<view class="message-content" :class="{ 'message-self': message.isSelf }">
						<text class="message-text">{{ message.content }}</text>
						<text class="message-time">{{ message.time }}</text>
					</view>
				</view>
			</scroll-view>
			
			<!-- 输入框 -->
			<view class="chat-input-area">
				<input class="chat-input" v-model="inputMessage" placeholder="输入消息..." @confirm="sendMessage" />
				<button class="send-btn" @click="sendMessage">发送</button>
			</view>
		</view>
		
		<!-- 专家简介弹窗 -->
		<uni-popup ref="nurseIntroPopup" type="center" :mask-click="true">
			<view class="nurse-intro-popup">
				<view class="popup-header">
					<text class="popup-title">专家简介</text>
					<uni-icons type="closeempty" size="20" color="#666666" @click="closeNurseIntro"></uni-icons>
				</view>
				<scroll-view class="popup-content" scroll-y>
					<view class="nurse-intro-content">
						<view class="intro-avatar-section">
							<view class="intro-avatar">
								<text class="avatar-text-large">{{ currentNurse.name }}</text>
							</view>
							<view class="intro-basic-info">
								<text class="intro-name">{{ currentNurse.name }}</text>
								<text class="intro-title">{{ currentNurse.title }}</text>
								<text class="intro-department">{{ currentNurse.department }}</text>
							</view>
						</view>
						<view class="intro-section">
							<text class="section-title">个人简介</text>
							<text class="section-content">{{ currentNurse.introduction }}</text>
						</view>
						<view class="intro-section">
							<text class="section-title">专业擅长</text>
							<text class="section-content">{{ currentNurse.expertise }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="popup-footer">
					<button class="confirm-btn" @click="confirmSelectNurse">确认选择</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { listNursingExperts} from "@/api/secondVitim/nursingExperts"
	import messageManager from "@/utils/message"
	import { getPreciseTimestamp } from "@/utils/common"
	
	export default {
		data() {
			return {
				currentView: 'conversationList', // 当前视图: conversationList | expertSelection | chatDetail
				selectedNurse: null, // 已选择的护士
				currentNurse: {}, // 当前查看的护士
				inputMessage: '', // 输入的消息
				messageList: [], // 消息列表
				scrollTop: 0,
				nurseList: [], // 专家列表
				conversationList: [] // 对话列表
			}
		},
		async onLoad() {
			//加载专家列表
			await this.loadNurseExperts();
			// 加载对话列表（需要等待专家列表加载完成）
			this.loadConversationList();
			// 监听消息更新事件
			uni.$on('message-updated', this.onMessageUpdated);
		},
		async onShow() {
			// 页面显示时刷新对话列表
			if (this.currentView === 'conversationList') {
				// 如果专家列表为空，先加载专家列表
				if (this.nurseList.length === 0) {
					await this.loadNurseExperts();
				}
				this.loadConversationList();
			}
		},
		onUnload() {
			// 移除消息更新事件监听
			uni.$off('message-updated', this.onMessageUpdated);
		},
		methods: {
			//加载专家护士列表
			async loadNurseExperts(){
				try {
					const response = await listNursingExperts();
					this.nurseList = response.rows || [];
				} catch (error) {
					console.error('加载专家列表失败:', error);
					this.nurseList = [];
				}
			},
			
			// 加载对话列表
			loadConversationList() {
				const userId = this.$store.state.user.id;
				if (!userId) {
					console.warn('用户ID不存在，无法加载对话列表');
					this.conversationList = [];
					return;
				}
				
				const allMessages = uni.getStorageSync('all_messages') || [];
				console.log('加载对话列表 - 消息总数:', allMessages.length);
				console.log('当前用户ID:', userId);
				console.log('专家列表数量:', this.nurseList.length);
				
				// 创建专家ID到专家的映射
				const expertMap = new Map();
				this.nurseList.forEach(expert => {
					if (expert.userId) {
						expertMap.set(expert.userId, expert);
					}
				});
				
				// 提取与专家的对话
				const conversationMap = new Map();
				
				allMessages.forEach(msg => {
					// 判断是否是当前用户与专家的对话
					let expertId = null;
					let expert = null;
					let expertInfo = null;
					
					// 当前用户发送给专家
					if (msg.senderId === userId && msg.receiverType === 'expert') {
						expertId = msg.receiverId;
						expert = expertMap.get(expertId);
						// 如果专家列表中找不到，从消息中提取专家信息
						if (!expert && expertId) {
							expertInfo = {
								userId: expertId,
								name: msg.receiverName || '专家',
								title: '',
								department: ''
							};
						}
					}
					// 专家发送给当前用户
					else if (msg.receiverId === userId && msg.senderType === 'expert') {
						expertId = msg.senderId;
						expert = expertMap.get(expertId);
						// 如果专家列表中找不到，从消息中提取专家信息
						if (!expert && expertId) {
							expertInfo = {
								userId: expertId,
								name: msg.senderName || '专家',
								title: '',
								department: ''
							};
						}
					}
					
					// 使用找到的专家或从消息中提取的专家信息
					const finalExpert = expert || expertInfo;
					
					if (finalExpert && expertId) {
						if (!conversationMap.has(expertId)) {
							conversationMap.set(expertId, {
								expert: finalExpert,
								lastMessage: msg.content,
								lastMessageTime: msg.timestamp,
								unreadCount: 0
							});
						} else {
							const conversation = conversationMap.get(expertId);
							// 更新最后一条消息（取最新的）
							if (new Date(msg.timestamp) > new Date(conversation.lastMessageTime)) {
								conversation.lastMessage = msg.content;
								conversation.lastMessageTime = msg.timestamp;
							}
							// 统计未读消息
							if (!msg.isRead && msg.receiverId === userId) {
								conversation.unreadCount++;
							}
							// 如果专家信息更完整，更新专家信息
							if (expert && !conversation.expert.title) {
								conversation.expert = expert;
							}
						}
					}
				});
				
				// 转换为数组并按时间排序
				this.conversationList = Array.from(conversationMap.values()).sort((a, b) => {
					return new Date(b.lastMessageTime) - new Date(a.lastMessageTime);
				});
				
				console.log('对话列表加载完成，共', this.conversationList.length, '个对话');
			},
			
			// 打开聊天界面
			openChat(expert) {
				this.selectedNurse = expert;
				this.currentView = 'chatDetail';
				this.loadChatHistory();
			},
			
			// 返回对话列表
			backToConversationList() {
				this.currentView = 'conversationList';
				this.selectedNurse = null;
				this.messageList = [];
				this.loadConversationList();
			},
			
			// 显示专家选择界面
			showExpertSelection() {
				this.currentView = 'expertSelection';
			},
			
			// 查看专家简介
			viewNurseIntro(nurse) {
				this.currentNurse = nurse;
				this.$refs.nurseIntroPopup.open();
			},
			
			// 关闭专家简介
			closeNurseIntro() {
				this.$refs.nurseIntroPopup.close();
			},
			
			// 选择护士
			selectNurse(nurse) {
				this.currentNurse = nurse;
				// 直接选择，不显示介绍
				this.confirmSelectNurse();
			},
			
			// 确认选择护士
			confirmSelectNurse() {
				this.selectedNurse = this.currentNurse;
				// 保存选择到本地存储
				uni.setStorageSync('selected_nurse', this.selectedNurse);
				// 切换到聊天界面
				this.currentView = 'chatDetail';
				// 初始化聊天记录
				this.initChatHistory();
				// 关闭弹窗
				this.closeNurseIntro();
			},
			
			// 初始化聊天记录
			initChatHistory() {
				// 如果消息列表为空，添加欢迎消息
				if (!this.messageList || this.messageList.length === 0) {
					const welcomeMessage = {
						content: '您好，我是' + this.selectedNurse.name + '，很高兴为您提供心理疏导支持。请告诉我您需要什么帮助？',
						isSelf: false,
						time: this.formatTime(new Date()),
						timestamp: new Date().getTime()
					};
					this.messageList = [welcomeMessage];
					this.saveChatHistory();
				} else {
					// 检查是否已有欢迎消息
					const hasWelcomeMessage = this.messageList.some(msg => 
						!msg.isSelf && msg.content.includes('很高兴为您提供心理疏导支持')
					);
					
					if (!hasWelcomeMessage) {
						const welcomeMessage = {
							content: '您好，我是' + this.selectedNurse.name + '，很高兴为您提供心理疏导支持。请告诉我您需要什么帮助？',
							isSelf: false,
							time: this.formatTime(new Date()),
							timestamp: new Date().getTime()
						};
						this.messageList.unshift(welcomeMessage);
						this.saveChatHistory();
					}
				}
			},
			
			// 加载聊天记录
			loadChatHistory() {
				if (!this.selectedNurse || !this.selectedNurse.userId) {
					console.warn('专家信息不完整，无法加载聊天记录');
					this.messageList = [];
					return;
				}
				
				const userId = this.$store.state.user.id;
				const expertId = this.selectedNurse.userId;
				const allMessages = uni.getStorageSync('all_messages') || [];
				
				console.log('加载聊天记录 - 专家ID:', expertId, '用户ID:', userId);
				console.log('消息总数:', allMessages.length);
				
				// 从 all_messages 中提取与当前专家的对话
				const chatMessages = allMessages.filter(msg => {
					const isFromExpert = msg.senderId === expertId && msg.receiverId === userId;
					const isToExpert = msg.senderId === userId && msg.receiverId === expertId;
					return isFromExpert || isToExpert;
				}).sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
				
				console.log('找到', chatMessages.length, '条聊天记录');
				
				// 转换为聊天界面需要的格式
				this.messageList = chatMessages.map(msg => {
					const isSelf = msg.senderId === userId;
					return {
						content: msg.content,
						isSelf: isSelf,
						time: this.formatTime(new Date(msg.timestamp)),
						timestamp: msg.timestamp
					};
				});
				
				// 如果没有消息，初始化欢迎消息
				if (this.messageList.length === 0) {
					this.initChatHistory();
				} else {
					// 保存到本地缓存
					this.saveChatHistory();
				}
				
				// 滚动到底部
				this.$nextTick(() => {
					this.scrollTop = 9999;
				});
			},
			
			// 保存聊天记录
			saveChatHistory() {
				if (this.selectedNurse && this.selectedNurse.userId) {
					uni.setStorageSync('chat_history_' + this.selectedNurse.userId, this.messageList);
				}
			},
			
			// 发送消息
			async sendMessage() {
				if (!this.inputMessage.trim()) {
					return;
				}
				
				const userId = this.$store.state.user.id;
				const userName = this.$store.state.user.name;
				const timestamp = new Date().getTime();
				const inputContent = this.inputMessage;
				
				if (!this.selectedNurse || !this.selectedNurse.userId) {
					uni.showToast({
						title: '请先选择专家',
						icon: 'none'
					});
					return;
				}
				
				// 创建消息对象
				const message = {
					id: 'msg_' + timestamp + '_' + Math.random().toString(36).substr(2, 9), // 生成唯一ID
					senderId: userId,
					senderName: userName,
					senderType: 'nurse',
					receiverId: this.selectedNurse.userId,
					receiverName: this.selectedNurse.name,
					receiverType: 'expert',
					content: inputContent,
					timestamp: timestamp,
					isRead: false
				};
				
				console.log('发送消息:', message);
				
				// 先添加到本地聊天记录（立即显示）
				const userMessage = {
					content: inputContent,
					isSelf: true,
					time: this.formatTime(new Date()),
					timestamp: timestamp
				};
				this.messageList.push(userMessage);
				this.saveChatHistory();
				
				// 保存到统一的消息系统
				const allMessages = uni.getStorageSync('all_messages') || [];
				allMessages.push(message);
				uni.setStorageSync('all_messages', allMessages);
				
				// 触发消息更新事件
				uni.$emit('message-updated');
				
				// 清空输入框
				this.inputMessage = '';
				
				// 滚动到底部
				this.$nextTick(() => {
					this.scrollTop = 9999;
				});
				
				// 发送消息到服务器
				try {
					const serverMessage = await messageManager.sendMessageToServer(message);
					// 如果服务器返回了新的消息ID，更新本地消息
					if (serverMessage && serverMessage.id) {
						const allMessages = uni.getStorageSync('all_messages') || [];
						const index = allMessages.findIndex(msg => msg.id === message.id || 
							(msg.senderId === message.senderId && 
							 msg.receiverId === message.receiverId && 
							 msg.timestamp === message.timestamp));
						if (index !== -1) {
							allMessages[index] = { ...allMessages[index], ...serverMessage };
							uni.setStorageSync('all_messages', allMessages);
						}
					}
				} catch (error) {
					console.error('发送消息到服务器失败:', error);
					// 即使发送失败，消息也已经保存在本地，用户可以继续使用
				}
				
				// 刷新对话列表
				this.$nextTick(() => {
					this.loadConversationList();
				});
			},
			
			// 显示设置
			showSettings() {
				uni.showActionSheet({
					itemList: ['返回对话列表', '清空聊天记录'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 返回对话列表
							this.backToConversationList();
						} else if (res.tapIndex === 1) {
							// 清空聊天记录
							uni.showModal({
								title: '提示',
								content: '确定要清空聊天记录吗？',
								success: (res) => {
									if (res.confirm) {
										this.messageList = [];
										if (this.selectedNurse && this.selectedNurse.userId) {
											uni.removeStorageSync('chat_history_' + this.selectedNurse.userId);
										}
										// 同时清理 all_messages 中相关的消息
										this.clearChatMessages();
										this.initChatHistory();
										// 刷新对话列表
										this.loadConversationList();
									}
								}
							});
						}
					}
				});
			},
			
			// 清空与当前专家的聊天消息
			clearChatMessages() {
				const userId = this.$store.state.user.id;
				const expertId = this.selectedNurse.userId;
				const allMessages = uni.getStorageSync('all_messages') || [];
				
				// 过滤掉与当前专家的消息
				const filteredMessages = allMessages.filter(msg => {
					const isFromExpert = msg.senderId === expertId && msg.receiverId === userId;
					const isToExpert = msg.senderId === userId && msg.receiverId === expertId;
					return !(isFromExpert || isToExpert);
				});
				
				uni.setStorageSync('all_messages', filteredMessages);
			},
			
			// 格式化时间
			formatTime(date) {
				if (typeof date === 'number') {
					date = new Date(date);
				}
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			
			// 格式化对话时间
			formatConversationTime(timestamp) {
				if (!timestamp) return '';
				
				const now = new Date();
				const msgDate = new Date(timestamp);
				const diff = now.getTime() - msgDate.getTime();
				const days = Math.floor(diff / (1000 * 60 * 60 * 24));
				
				if (days === 0) {
					// 今天，显示时间
					return this.formatTime(msgDate);
				} else if (days === 1) {
					// 昨天
					return '昨天';
				} else if (days < 7) {
					// 一周内
					return `${days}天前`;
				} else {
					// 更早，显示日期
					const month = (msgDate.getMonth() + 1).toString().padStart(2, '0');
					const day = msgDate.getDate().toString().padStart(2, '0');
					return `${month}-${day}`;
				}
			},
			
			// 消息更新事件处理
			onMessageUpdated(event) {
				// 刷新对话列表
				this.loadConversationList();
				// 如果当前有选中的护士，重新加载聊天记录
				if (this.selectedNurse && this.currentView === 'chatDetail') {
					this.loadChatHistory();
				}
			}
		}
	}
</script>

<style scoped>
.interactive-page {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 对话列表页面样式 */
.conversation-list-page {
	padding: 20rpx;
}

.conversation-list {
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
}

.conversation-item {
	display: flex;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	background-color: #ffffff;
	transition: background-color 0.2s;
}

.conversation-item:active {
	background-color: #f8f8f8;
}

.conversation-item:last-child {
	border-bottom: none;
}

.conversation-avatar {
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #4A90E2 0%, #67C23A 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.conversation-avatar .avatar-text {
	font-size: 40rpx;
	color: #ffffff;
	font-weight: bold;
}

.conversation-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.conversation-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.conversation-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	flex: 1;
}

.conversation-time {
	font-size: 24rpx;
	color: #999999;
	margin-left: 20rpx;
}

.conversation-title {
	font-size: 26rpx;
	color: #4A90E2;
	margin-bottom: 8rpx;
}

.conversation-preview {
	font-size: 28rpx;
	color: #666666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 40rpx;
	background-color: #ffffff;
	border-radius: 12rpx;
	margin-top: 40rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	margin-bottom: 40rpx;
}

.select-expert-btn {
	background-color: #4A90E2;
	color: #ffffff;
	border: none;
	border-radius: 8rpx;
	padding: 24rpx 60rpx;
	font-size: 28rpx;
	font-weight: 500;
}

.select-expert-btn:active {
	background-color: #357ABD;
}

/* 高年资护士选择页面样式 */
.selection-page {
	padding: 20rpx;
}

.page-header {
	margin-bottom: 40rpx;
	text-align: center;
}

.page-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 10rpx;
}

.page-subtitle {
	font-size: 28rpx;
	color: #666666;
	display: block;
}

.nurse-list {
	background-color: #ffffff;
}

.nurse-item {
	background-color: #ffffff;
	border: 1rpx solid #e0e0e0;
	border-radius: 12rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.nurse-info {
	display: flex;
	margin-bottom: 20rpx;
}

.nurse-avatar {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.nurse-avatar .avatar-text {
	font-size: 48rpx;
	color: #ffffff;
	font-weight: bold;
}

.nurse-details {
	flex: 1;
	min-width: 0;
}

.nurse-header {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
}

.nurse-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-right: 15rpx;
}

.nurse-badge {
	background-color: #ff4757;
	border-radius: 4rpx;
	padding: 4rpx 12rpx;
}

.badge-text {
	font-size: 22rpx;
	color: #ffffff;
}

.nurse-title {
	font-size: 26rpx;
	color: #007aff;
	display: block;
	margin-bottom: 8rpx;
}

.nurse-department {
	font-size: 24rpx;
	color: #666666;
	display: block;
	margin-bottom: 10rpx;
}

.nurse-stats {
	display: flex;
	gap: 30rpx;
	margin-top: 10rpx;
}

.stat-item {
	font-size: 24rpx;
	color: #999999;
}

.nurse-actions {
	display: flex;
	gap: 20rpx;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.view-intro-btn {
	flex: 1;
	background-color: #ffffff;
	color: #007aff;
	border: 1rpx solid #007aff;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
}

.view-intro-btn:active {
	background-color: #f0f7ff;
}

.select-btn {
	flex: 1;
	background-color: #007aff;
	color: #ffffff;
	border: none;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	font-weight: 500;
}

.select-btn:active {
	background-color: #0056b3;
}

/* 聊天页面样式 */
.chat-page {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
}

.chat-header {
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e0e0e0;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

.chat-header-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.chat-header-left .uni-icons {
	margin-right: 20rpx;
	padding: 10rpx;
}

.chat-header-info {
	flex: 1;
}

.chat-nurse-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 5rpx;
}

.chat-nurse-title {
	font-size: 24rpx;
	color: #666666;
	display: block;
}

.chat-header-actions {
	padding: 10rpx;
}

.chat-messages {
	flex: 1;
	padding: 20rpx;
	background-color: #f5f5f5;
}

.message-item {
	margin-bottom: 20rpx;
	display: flex;
}

.message-item.message-right {
	justify-content: flex-end;
}

.message-content {
	max-width: 70%;
	padding: 20rpx;
	border-radius: 12rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.message-content.message-self {
	background-color: #007aff;
}

.message-text {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.6;
	display: block;
	margin-bottom: 8rpx;
}

.message-content.message-self .message-text {
	color: #ffffff;
}

.message-time {
	font-size: 22rpx;
	color: #999999;
	display: block;
	text-align: right;
}

.message-content.message-self .message-time {
	color: rgba(255, 255, 255, 0.8);
}

.chat-input-area {
	background-color: #ffffff;
	padding: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	border-top: 1rpx solid #e0e0e0;
}

.chat-input {
	flex: 1;
	height: 50px;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	padding: 20rpx;
	font-size: 28rpx;
	color: #333333;
}

.send-btn {
	background-color: #007aff;
	color: #ffffff;
	border: none;
	border-radius: 8rpx;
	padding: 20rpx 40rpx;
	font-size: 28rpx;
	font-weight: 500;
}

.send-btn:active {
	background-color: #0056b3;
}

/* 专家简介弹窗样式 */
.nurse-intro-popup {
	width: 680rpx;
	max-height: 80vh;
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.popup-header {
	padding: 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #e0e0e0;
	background-color: #f8f8f8;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	flex: 1;
}

.popup-content {
	flex: 1;
	max-height: 60vh;
	padding: 30rpx;
}

.nurse-intro-content {
	width: 100%;
}

.intro-avatar-section {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.intro-avatar {
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.avatar-text-large {
	font-size: 48rpx;
	color: #ffffff;
	font-weight: bold;
}

.intro-basic-info {
	flex: 1;
}

.intro-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 8rpx;
}

.intro-title {
	font-size: 26rpx;
	color: #007aff;
	display: block;
	margin-bottom: 8rpx;
}

.intro-department {
	font-size: 24rpx;
	color: #666666;
	display: block;
}

.intro-section {
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	display: block;
	margin-bottom: 15rpx;
}

.section-content {
	font-size: 26rpx;
	color: #666666;
	line-height: 1.8;
	display: block;
	white-space: pre-line;
}

.intro-stats {
	display: flex;
	justify-content: space-around;
	padding: 30rpx 0;
	border-top: 1rpx solid #f0f0f0;
	margin-top: 20rpx;
}

.stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #007aff;
	display: block;
	margin-bottom: 8rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #999999;
	display: block;
}

.popup-footer {
	padding: 30rpx;
	border-top: 1rpx solid #e0e0e0;
	background-color: #f8f8f8;
}

.confirm-btn {
	width: 100%;
	background-color: #007aff;
	color: #ffffff;
	border: none;
	border-radius: 8rpx;
	padding: 24rpx;
	font-size: 30rpx;
	font-weight: 500;
}

.confirm-btn:active {
	background-color: #0056b3;
}
</style>
